<template>
	<view class="box">
		<page-head :transparent='false'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="imgBanner">
			<image :src="bkBanner" mode="widthFix"></image>
		</view>
		<view class="imgList" v-for="(item, i) in imgList" @click="linkUrl(item.imgUrl,i)" :key="i">
			<image :src="item.img" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import bkBanner from '../../static/img/bkxn/bkBanner.png'
	import bk1 from '../../static/img/bkxn/bk1.png'
	import bk2 from '../../static/img/bkxn/bk2.png'
	import bk3 from '../../static/img/bkxn/bk3.png'
	import bk4 from '../../static/img/bkxn/bk4.png'
	import bk5 from '../../static/img/bkxn/bk5.png'
	import bk6 from '../../static/img/bkxn/bk6.png'
	import bk7 from '../../static/img/bkxn/bk7.png'
	import bk8 from '../../static/img/bkxn/bk8.png'

	export default {
		data() {
			return {
				title: '暑期爆款',
				bkBanner: bkBanner,
				imgList: [{
						img: bk1,
						imgUrl: '../selfdetail/selfdetail?skuId=3254&cid=628&title=旅游卡全国通用3000+景点畅享游 黄金卡&seller=京东自营'
					},
					{
						img: bk2,
						imgUrl: '../selfdetail/selfdetail?skuId=3253&cid=628&title=旅游卡全国通用3000+景点畅享游 钻石卡&seller=京东自营'
					},
					{
						img: bk3,
						imgUrl: '../selfdetail/selfdetail?skuId=3544&cid=628&title=微信国内订机票10元立减券&seller=京东自营'
					},
					{
						img: bk4,
						imgUrl: '../selfdetail/selfdetail?skuId=7132&cid=1112&title=樊登读书21天会员体验卡&seller=京东自营'
					},
					{
						img: bk5,
						imgUrl: '../selfdetail/selfdetail?skuId=2529&cid=531&title=腾讯视频VIP会员卡月卡季卡年卡（直充）&seller=京东自营'
					},
					{
						img: bk6,
						imgUrl: '../selfdetail/selfdetail?skuId=2474&cid=531&title=爱奇艺VIP会员卡月卡 季卡 半年卡 年卡（直充）&seller=京东自营'
					},
					{
						img: bk7,
						imgUrl: '../selfdetail/selfdetail?skuId=2518&cid=531&title=芒果TV移动PC端会员月卡季卡半年卡年卡直充&seller=京东自营'
					},
					{
						img: bk8,
						imgUrl: '../selfdetail/selfdetail?skuId=2523&cid=531&title=优酷土豆黄金会员直充周卡月卡季卡年卡直充&seller=京东自营'
					}
				]
			}
		},
		onLoad() {
			this.genCommonData()
		},
		methods: {
			genCommonData() {
				const that = this
				let url = window.location.href;
				console.log("url===" + url);
				let reg_url = /^[^\?]+\?([\w\W]+)$/,
					reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
					arr_url = reg_url.exec(url),
					ret = {};
				if (arr_url && arr_url[1]) {
					let str_para = arr_url[1],
						result;
					while ((result = reg_para.exec(str_para)) != null) {
						ret[result[1]] = result[2];
					}
				}
				let token = ret.token;
				let bump = ret.bump;
				console.log("token==" + token);
				if (token != '' && token != 'null' && token != null && token != undefined && token != 'undefined') {
					uni.setStorageSync('token', decodeURI(token));
					uni.setStorageSync('bump', bump);
				}
			},
			linkUrl(url, index) {
				console.log('index===' + (parseInt(index) + parseInt(1)));
				onEvent('page_home_top_banner1_goods' + (parseInt(index) + parseInt(1)));
				setTimeout(function() {
					if (url !== '') {
						h5NavigateTo({
							url: url
						});
					}
				}, 2000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;

		.imgBanner {
			width: 100%;
			overflow: hidden;
			overflow-y: auto;

			image {
				width: 100%;
				display: block;
			}
		}

		.imgList {
			width: 100%;
			overflow: hidden;
			overflow-y: auto;

			image {
				width: 100%;
				display: block;
			}
		}

	}
</style>
